<template>
	<view>
		<Search :banner="banner"></Search>
		<Ticket></Ticket>
		<Classify></Classify>
		<Content id="boxFixed" :class="{ is_fixed: isFixed }" :tab="tab"></Content>
		<view style="height:145upx;"></view>
		<!-- tab切换的loading -->
		<load-list v-if="loadinglist"></load-list>
		<Article :Articleend="Articleend" v-if="!loadinglist"></Article>
		<!-- 没有数据的提示 -->
		<none-data v-if="nonedata"></none-data>
		<!-- 上拉加载组件 -->
		<view class="load-more" v-if="loadMore"><aLoadMore :status="status" mode="loading2"></aLoadMore></view>
		<!-- 初次进入加载的动画 -->
		<load-anim v-if="homeload"></load-anim>
	</view>
</template>

<script>
import Search from './compontens/search.vue';
import Ticket from './compontens/ticket.vue';
import Classify from './compontens/classify.vue';
import Content from './compontens/content.vue';
import Article from './compontens/article.vue';
// 引入公用方法
import { home, homeList } from '../../common/cloundfun.js';
import { mapState, mapMutations } from 'vuex';
export default {
	components: {
		Search,
		Ticket,
		Classify,
		Content,
		Article
	},
	data() {
		return {
			isFixed: false,
			rect: null,
			menutop: null,
			banner: [],
			tab: [],
			Articleend: [],
			// tab切换的loading状态
			loadinglist: false,
			// 上拉加载值
			pageid: 0,
			nav: 'recommend',
			// 上拉加载
			status: 'down',
			loadMore: false,
			// 没有数据展示的提示
			nonedata:false,
			// 加载动画
			homeload:true
		};
	},
	created() {
		// 请求轮播数据
		let banner = 'banner';
		let tab = 'tab';
		let listing = 'recommend';
		// 同时并发请求，批量请求多个接口
		Promise.all([home(banner), home(tab), homeList(listing, this.pageid)])
			.then(res => {
				// console.log(res)
				// banner
				this.banner = res[0];
				// tab切换
				this.tab = res[1];
				// 攻略景点列表
				this.Articleend = res[2];
				// 所有本页数据请求成功之后消除loading动画
				this.homeload=false
			})
			.catch(err => {
				console.log(err);
			});
	},
	methods: {
		// 上拉加载
		pullon() {
			// 上拉加载组件
			this.loadMore = true;
			this.status = 'loading';

			let listing = this.nav;
			homeList(listing, this.pageid)
				.then(res => {
					// 数组合并 Es6 语法
					console.log('上拉加载数据测试', res);
					if (res.length == 0) {
						this.status = 'normal';
					} else {
						this.Articleend = [...this.Articleend, ...res];
					}
				})
				.catch(err => {
					console.log(err);
				});
		}
	},
	onLoad() {
		const query = wx.createSelectorQuery();
		query.select('#boxFixed').boundingClientRect();
		query.exec(res => {
			this.menutop = res[0].top;
		});
	},
	onReachBottom() {
		// 触底--上垃加载
		this.pageid++;
		console.log(this.pageid);
		this.pullon();
	},
	onPageScroll: function(e) {
		// 小程序里的页面监听滚动
		// console.log(e)
		this.rect = e.scrollTop;
		// 下方代码替换到了计算属性里
		// if(this.rect>=this.menutop){
		// 	this.isFixed=true;
		// }else{
		// 	this.isFixed=false;
		// }
	}, // 计算属性,实时监听数据
	computed: {
		// 取展开数据仓库里的每一项
		// 监听里面的数据变化，如果数据改变 就要重新执行
		// 它与局部计算属性混合使用所以就可以使用this.list.listing获取仓库数据
		...mapState(['list', 'load', 'navmin',"nonemin"]),
		// 取到tab切换的数据
		count() {
			// vue第一次传来的默认值,不会影响视图层
			this.Articleend = this.list.listing;
		},
		// tab切换的Loading状态
		countlad() {
			this.loadinglist = this.load.loading;
		},
		// 以对象传过来的值
		navData() {
			this.loadinglist = this.navmin.loading;
			this.nav = this.navmin.naving;
			this.pageid = this.navmin.pageid;
			this.status = this.navmin.status;
			this.loadMore = this.navmin.loadMore;
			this.nonedata=this.navmin.nonedata
		},
		// tab切换没有数据的提示
		noneted(){
			this.nonedata=this.nonemin.nonedata;
		},
		// 滑动组件置顶
		namepage() {
			if (this.rect >= this.menutop) {
				this.isFixed = true;
			} else {
				this.isFixed = false;
			}
		}
	}
};
</script>

<style scoped>
.is_fixed {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
}
.load-more {
	margin-top: 40upx;
	color: gold;
}
</style>
